<template>
  <dv-border-box-8 style="width:49.8%;height:160px;margin-bottom:8px;" :dur="20">
    <dv-border-box-7>
      <div class="chart-title">三菱PLC</div>
      <div class="container">
        <div class="data">
          <div>
            <p class="des">当前温度</p>
            <p class="num">76</p>
          </div>
          <div style="width:2px;height:20px;background:#FFFFFFF;color:blue">| </div>
          <div>
            <p class="des">最高<span class="max">8768</span></p>
            <p class="des">最低<span class="max">8768</span></p>
          </div>
        </div>
        <div id="chart"></div>
      </div>
    </dv-border-box-7>
  </dv-border-box-8>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    },
    max: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    id: {
      type: String,
      default: ''
    }

  },
  data () {
    return {
      chart: {},
      option: {
        grid: {// 直角坐标系内绘图网格
          left: '0', // grid 组件离容器左侧的距离
          bottom: '0',
          right: '0',
          top: '0',
          // grid 区域是否包含坐标轴的刻度标签
          containLabel: true
        },
        legend: {
          top: '10',
          textStyle: { color: '#fff' },
          data: ['正常', '报警', '离线']
        },
        color: ['#29B9EE', '#F85163', '#7B7C7C'],
        tooltip: { // 提示框组件
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7],
          // data: this.xData,
          show: false,
          splitLine: { show: false }, // 去除网格线,
          axisLine: {
            show: false // 不显示坐标轴轴线
          },
          axisTick: {
            show: false // 不显示坐标轴刻度
          }

        },
        yAxis: {
          type: 'value',
          show: false
          // max: 0,
          // min: 0,
          // interval: 1
        },
        series: [{
          type: 'line',
          // stack: '总量',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: true,
          areaStyle: {
            opacity: 0.4,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(128, 255, 165,0.5)'
            }, {
              offset: 1,
              color: 'rgba(1, 191, 236,0.5)'
            }])
          },
          emphasis: {
            focus: 'series'
          },
          // data: [2, 3, 4, 5, 6, 8, 9]
          data: [17, 28, 30, 74, 65, 46, 27]
        }]
      }
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      var chartDom = document.getElementById('chart')
      var myChart = echarts.init(chartDom)
      this.chart = myChart
      this.option && myChart.setOption(this.option)
      window.addEventListener('resize', () => { myChart.resize() })
    },
  }
}
</script>

<style lang="scss" scoped>
.chart-title {
  font-size: 18px;
  line-height: 30px;
  margin: 0 20px;
  margin-top: 10px;
  color: rgb(186, 231, 63);
}
.container {
  width: 100%;
  height: 120px;
  display: grid;
  grid-template-columns: 3fr 6fr;
  justify-items: center;
  align-items: center;
  .data {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    .desc {
      font-size: 24px;
      line-height: 32px;
    }
    .num {
      font-size: 40px;
      line-height: 70px;
      color: aqua;
    }
    .max {
      font-size: 24px;
      line-height: 32px;
      color: aqua;
      margin: 0 10px;
    }
  }
  #chart {
    width: 100%;
    height: 100%;
  }
}
</style>
